<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <router-view />

  </a-config-provider>
</template>

<script>
// import VScaleScreen from "./components/v-scale-screen.vue";
import { enquireScreen } from "./utils/util";
import { mapState, mapMutations } from "vuex";
import themeUtil from "@/utils/themeUtil";
import { getI18nKey } from "@/utils/routerUtil";

export default {
  name: "App",
  // components: { VScaleScreen },
  data() {
    return {
      locale: {},
      currentWidth: 0,
      currentHeight: 0,
      fullScreen: false,
    };
  },
  created() {
    this.setHtmlTitle();
    this.setLanguage(this.lang);
    enquireScreen((isMobile) => this.setDevice(isMobile));
  },
  mounted() {
    var that = this;
    window.onresize = function () {
      if (!that.checkFull()) {
        // 要执行的动作
        that.currentWidth = document.body.clientWidth;
        that.currentHeight = document.body.clientHeight;
      }
      that.currentWidth = document.body.clientWidth;
      that.currentHeight = document.body.clientHeight;
    };
    this.currentWidth = document.body.clientWidth;
    this.currentHeight = document.body.clientHeight;

    this.setWeekModeTheme(this.weekMode);
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val);
    },
    lang(val) {
      this.setLanguage(val);
      this.setHtmlTitle();
    },
    $route() {
      this.setHtmlTitle();
    },
    "theme.mode": function (val) {
      let closeMessage = this.$message.loading(
        `您选择了主题模式 ${val}, 正在切换...`
      );
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage);
    },
    "theme.color": function (val) {
      let closeMessage = this.$message.loading(
        `您选择了主题色 ${val}, 正在切换...`
      );
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage);
    },
    layout: function () {
      window.dispatchEvent(new Event("resize"));
    },
  },
  computed: {
    ...mapState("setting", ["layout", "theme", "weekMode", "lang"]),
  },
  methods: {
    ...mapMutations("setting", ["setDevice"]),
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add("week-mode");
      } else {
        document.body.classList.remove("week-mode");
      }
    },

    checkFull() {
      var isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      if (isFull === undefined) isFull = false;
      return isFull;
    },
    setLanguage(lang) {
      this.$i18n.locale = lang;
      switch (lang) {
        case "CN":
          this.locale =
            require("ant-design-vue/es/locale-provider/zh_CN").default;
          break;
        case "HK":
          this.locale =
            require("ant-design-vue/es/locale-provider/zh_TW").default;
          break;
        case "US":
        default:
          this.locale =
            require("ant-design-vue/es/locale-provider/en_US").default;
          break;
      }
    },
    setHtmlTitle() {
      const route = this.$route;
      const key =
        route.path === "/"
          ? "home.name"
          : getI18nKey(route.matched[route.matched.length - 1].path);
      document.title = process.env.VUE_APP_NAME + " | " + this.$t(key);
    },
    popContainer() {
      return document.getElementById("popContainer");
    },
  },
};
</script>

<style lang="less">
.ant-menu-item {
  color: #fff !important;
  //color: #303133 !important;
  background: rgba(255, 255, 255, 0.3) !important;
  // border: 1px solid !important;
  webkit-box-shadow: none;
  box-shadow: none !important; //子菜单阴影
  // box-shadow: 0 0 4px #ff4d4f !important;1a;//子菜单阴影
}

.ant-menu .ant-menu-item {
  //border-radius: 3px;
  //background: rgba(255, 255, 255, 0.7) !important;//默认选中状态
}

.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  // background-color: #ffffff !important;
  // border: 2px solid #ff4d4f !important; !important;
  // border-radius: 4px !important;
  color: #000 !important;
}

.ant-menu.ant-menu-dark .ant-menu-item,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item {
  // border: 2px solid #ff4d4f !important;00;
}

.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  // background: #E5EFFD !important;
  background: #3A7BFF !important; //顶部菜单背景色
}

.ant-menu-dark .ant-menu-item:hover {
  // color: #ff4d4f !important; !important;
}

.ant-row .ant-menu-item>a {
  color: #fff !important;
}

.ant-row .ant-menu-dark .ant-menu-item,
.ant-row .ant-menu-dark .ant-menu-item-group-title,
.ant-row .ant-menu-dark .ant-menu-item>a:hover {
  //color: #ff4d4f !important; !important;
  color: #ffffff !important;
}

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item>a:hover {
  color: #ff4d4f !important;
}

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item {
  background-color: rgba(255, 255, 255, 0) !important;
  margin: 0px !important;
  color: #000 !important;
}

.ant-menu-dark .ant-menu-item-selected>a,
.ant-menu-dark .ant-menu-item-selected>a:hover {
  color: #000 !important;
}

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item>a {
  // color: #ffffff !important;
}

.ant-menu-item>a {
  color: #000 !important;

}

.ant-menu-vertical>.ant-menu-item,
.ant-menu-vertical-left>.ant-menu-item,
.ant-menu-vertical-right>.ant-menu-item,
.ant-menu-inline>.ant-menu-item,
.ant-menu-vertical>.ant-menu-submenu>.ant-menu-submenu-title,
.ant-menu-vertical-left>.ant-menu-submenu>.ant-menu-submenu-title,
.ant-menu-vertical-right>.ant-menu-submenu>.ant-menu-submenu-title,
.ant-menu-inline>.ant-menu-submenu>.ant-menu-submenu-title {
  height: 20px !important;
  line-height: 20px !important;
}


.ant-layout-sider-children {
  position: fixed;
  // background: url("./assets/img/bag.png") #e5effd no-repeat;
  transition: all 0.3s ease;
  z-index: 1;
  display: contents;
  // overflow: hidden !important;
  // display: grid !important;
}

.menu {
  padding: 0px !important;
  // position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
  width: 230px !important;
  margin: 10px !important;
  overflow: scroll;

}

.ant-layout-sider {
  background: #fff !important;
}

.ant-row .ant-menu-dark .ant-menu-item-selected .anticon {
  //color: #303133 !important; //菜单图标默认颜色
  color: #fff !important;
}

.ant-menu-dark .ant-menu-item-selected .anticon {
  //color: #303133 !important; //菜单图标默认颜色
  color: #ff4d4f !important;
}

.ant-row .ant-menu-dark .ant-menu-item-selected>a,
.ant-row .ant-menu-dark .ant-menu-item-selected>a:hover {
  color: #ffffff !important;
  //color: #000 !important;//菜单文字默认颜色
}

.ant-menu.ant-menu-dark .ant-menu-item,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item {
  // border-radius: 4px !important;
  // background-color: rgba(255, 255, 255, 0.3);
  // margin: 6px 0;
  height: 46px !important;
  box-shadow: none !important;
  // box-shadow: 0 0 4px #ff4d4f !important;
  box-sizing: border-box;
  min-width: auto;
}

.ant-menu-item,
.ant-menu-submenu,
.ant-menu-submenu-inline {
  color: #fff !important;
  // background: rgba(255, 255, 255, 0.3) !important;
}

.ant-menu-item:hover,
.ant-menu-submenu:hover,
.ant-menu-submenu-inline :hover {
  color: #ff4d4f !important;
  // color: #fff !important;
}

.ant-btn-primary {
  background-color: #ff4d4f !important;
  color: #fff !important;
  border-color: #ff4d4f !important;
}

.ant-btn-link {
  color: #ff4d4f !important;
}

// .ant-pagination-item-active {
//   border-color: #ff4d4f !important;
// }

// .ant-pagination-item:hover {
//   border-color: #ff4d4f !important;
//   // color: #ff4d4f !important;
// }

// .el-pager li.active {
//   color: #ff4d4f !important;
// }

// .ant-pagination-item-active a {
//   color: #ff4d4f !important;
// }

// .ant-pagination-item a:hover {
//   color: #ff4d4f !important;
// }

.el-input__inner:focus {
  border-color: #ff4d4f !important;
}

::selection {
  background-color: #ff4d4f !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}

.el-radio__input .is-checked .el-radio__inner:hover {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}

.el-radio__input.is-checked+.el-radio__label {
  color: #ff4d4f !important;
}

.ant-input:hover,
.ant-input:focus {
  border-color: #ff4d4f !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
}

.ant-select-selection:hover,
.ant-select-selection:focus {
  border-color: #ff4d4f !important;
}

.el-textarea__inner:hover,
.el-textarea__inner:focus {
  border-color: #ff4d4f !important;
}

// .ant-btn:hover{
//   color: #ff4d4f !important;
//   border-color: #ff4d4f !important;
// }
.el-pager {
  // background-color: #ff4d4f !important;
  // color: #fff !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff4d4f !important;
}

.ant-tabs-nav .ant-tabs-tab-active {
  color: #ff4d4f !important;

}

.ant-tabs-nav:hover .ant-tabs-tab:hover {
  color: #ff4d4f !important;

}

.ant-tabs-ink-bar {
  background-color: #ff4d4f !important;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
  color: #ff4d4f !important;
}

.el-button--small:hover {
  border-color: #ff4d4f !important;
  color: #ff4d4f !important;
}

.ant-checkbox-input {
  color: #ff4d4f !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #FF0000 !important;
  background-color: #FF0000 !important;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #FF0000 !important;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.el-checkbox__inner:hover {
  border-color: #FF0000 !important;
}


.el-button--primary {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}

.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0) inset !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0) inset !important;
}

.ant-menu-dark .ant-menu-item:hover>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item-active>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-active>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-open>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-selected>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title:hover>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-item:hover>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item:hover>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-item-active>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-active>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-open>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-selected>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-submenu-title:hover>.ant-menu-submenu-title:hover>.ant-menu-submenu-arrow::before {
  // background: #ff4d4f !important;
}

.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
  background: #303133 !important;
  color: #000 !important;
}

.ant-menu-submenu-title {
  color: #000 !important;
  width: 195px !important;
}

.screen-box {
  background: #00000000 !important;
}

/*---滚动条默认显示样式--*/

::-webkit-scrollbar-thumb {
  background-color: #8b8b8b;
  height: 50px;
  outline-offset: -2px;
  outline: 2px solid #fff;
  -webkit-border-radius: 4px;
  border: 2px solid #fff;
}

/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover {
  background-color: #606060;
  height: 50px;
  -webkit-border-radius: 4px;
}

/*---滚动条大小--*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: none;
}

/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece {
  background-color: rgba(255, 255, 0, 0);
  -webkit-border-radius: 0;
 
}

.ant-menu-submenu {
  margin-top: 10px !important;
}

.el-select-dropdown__item.selected{
  color: #ff4d4f !important;
}

.el-button--text:hover{
  border-color: #fff !important;
}


.ant-menu-horizontal>.ant-menu-item:hover,
.ant-menu-horizontal>.ant-menu-submenu:hover,
.ant-menu-horizontal>.ant-menu-item-active,
.ant-menu-horizontal>.ant-menu-submenu-active,
.ant-menu-horizontal>.ant-menu-item-open,
.ant-menu-horizontal>.ant-menu-submenu-open,
.ant-menu-horizontal>.ant-menu-item-selected,
.ant-menu-horizontal>.ant-menu-submenu-selected {
  color: #fff !important;
  border-radius: 3px;
  // background-color: rgba(255, 255, 255, 0.4) !important;
  background-color: #ff4d4f !important; //一级菜单选中状态
}

.ant-menu-item {
  // padding-left: 30px !important;
  width: 230px !important;
  // padding: 0px !important;
}

.page-header {
  display: none;
  margin-top: 16px;
  background: none !important;
  padding: 0 !important;
}

.exception-page {
  background-color: #fff !important;
}

// .ant-menu-horizontal {
//  margin-top: 8px !important;
// }
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background: rgba(58, 123, 255, 0) !important;
}

.ant-menu.ant-menu-dark .ant-menu-item,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item {
  margin-top: 8px !important;
  border-radius: 3px; //左侧每个li的样式
}

.ant-menu.ant-menu-dark .ant-menu-item,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item .ant-menu-item-active .ant-menu-item-selected {
  height: 26px !important;
}

.ant-menu .ant-menu-dark,
.ant-menu-submenu-popup.ant-menu-dark {
  background-color: #ff4d4f !important;
}

// .ant-row {
//   min-width: 1858px;
// }
.header-search .search-input {
  border: none !important; //搜索框底边框
}

.dropdown-tabs {
  background-color: #fff !important; //弹出框背景色
}

.ant-menu-dark .ant-menu-item-selected>a,
.ant-menu-dark .ant-menu-item-selected>a:hover {
  color: #ff4d4f !important;
}

.ant-menu-horizontal>.ant-menu-item-selected {
  background-color: #ff4d4f !important; //顶部菜单选中状态
}

// 右侧主要内容区背景样式
.bg_white {
  padding: 16px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: scroll;
}

//右侧布局边距
.ant-layout-has-sider>.ant-layout {
  padding: 0 0 0 30px !important;
}

.ant-table-tbody:hover {
  background-color: #fff !important;
}

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
  background-color: #f0f0f0 !important;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #f0f0f0 !important;
}



/* 对话框层手机及分辨率更小的设备 */
@media (max-width: 767px) {
  .ant-modal {
    margin: 8px 0 8px 8px !important;
  }
}

@media (max-width: 375px) {
  .ant-modal-body {
    padding: 12px !important;
    font-size: 12px !important;
  }

  .ant-steps-item-icon {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 12px !important;
  }

  .ant-steps-horizontal.ant-steps-label-horizontal>.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {
    margin-top: -6px !important;
    margin-left: -6px !important;
  }

  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-icon {
    margin-right: 8px !important;
  }

  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-title {
    line-height: 20px !important;
  }

  .ant-steps-item-title {
    font-size: 14px !important;
  }

  .captcha-ys {
    margin-top: -4px;
    cursor: pointer;
    height: 30px;
  }

 
}
</style>
